<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

defineOptions({
  name: 'Login',
})

const router = useRouter()
const isLogin = ref(true)

const onClickLeft = () => {
  router.back()
}

const onClickRight = () => {
  isLogin.value = !isLogin.value
}

const email = ref('')
const password = ref('')
const onSubmit = values => {
  // console.log('submit', values)
  console.log(1111);
  router.push('/')
}
</script>

<template>
  <div class="login-container">
    <van-nav-bar
      :title="isLogin ? '用户登录' : '用户注册'"
      left-text="返回"
      :right-text="isLogin ? '注册' : '登录'"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <div class="login-form">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="email"
            type="email"
            name="邮箱"
            label="邮箱"
            placeholder="请输入邮箱"
            :rules="[{ required: true, message: '请填写邮箱' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            autocomplete="off"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            {{ isLogin ? '登录' : '注册'}}
          </van-button>
        </div>
      </van-form>
      <img src="../../assets/images/mushroom-login.png" alt="">
    </div>
  </div>
</template>

<style scoped lang="less">
.login-container {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.login-form {
  position: relative;
  flex: 1;  
  margin-top: 100px;

  img {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: -60px;
    left: 20px;
  }
}

</style>
